<template>
  <div class="container">
    <div style="background-color: #fff;">
      <div class="box">
        <div style="margin-bottom: 10px;font-size: 16px;">各子系统风险信息</div>
        <div class="top_container">
          <div class="top">
            <Area :title='title'></Area>
          </div>
          <div class="top">
            <Area :title='exploit'></Area>
          </div>
          <div class="top">
            <Area :title='Standard'></Area>
          </div>
          <div class="top">
            <Area :title='meta'></Area>
          </div>
          <div class="top">
            <Area :title='quality'></Area>
          </div>
          <div class="top">
            <Area :title='share'></Area>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom_container" style="margin-top:15px;padding: 15px 0 0 10px;">
      <div class="bottom">
        <div class="title">服务与资源预警信息</div>
        <div class="chart">
          <div class="left">
            <Pie></Pie>
          </div>
          <div class="right">
            <RadialBar></RadialBar>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Area from '../components/Area.vue'
import Pie from '../components/Pie.vue'
import RadialBar from '../components/RadialBar.vue'
export default {
  data() {
    return {
      title: "指挥控制风险",
      exploit: "通信安全风险",
      Standard: "情报获取风险",
      meta: "技术故障风险",
      quality: "人员培训风险",
      share: "环境适应性风险",
    }
  },
  components: {
    Area,
    Pie,
    RadialBar
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 98%;
  padding: 5px 1.2em;
  height: 100vh;
  background-color: #ececec;

  div {
    .box {
      height: 100%;
      padding: 10px;

      .top_container {
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;

        .top {
          flex: 0 1 32%;
          height: 150px;
          margin-top: 10px;
          margin-left: 1%;
          border: 1.5px solid #ececec;
        }
      }

    }
  }
  .bottom_container{
    background-color: #fff;
    height: calc(100vh - 400px);
    .title{
      margin-bottom: 10px;
    }
    .bottom{
      .chart{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding:0 20px 0 10px;
        div:first-child{
          flex: 0 1 49%;
          height: 200px;
          box-sizing: border-box;
          border: 1px solid #ececec;
        }
        div:last-child{
          flex: 0 1 49%;
          height: 200px;
          border: 1px solid #ececec;
        }
      }
    }
  }
}
</style>
